<template>
    <div class="section-header text-center">
        <div class="subtitle subtitle--style3 justify-content-center">
            <img src="/images/icon/home3/1.png" alt="roket icon">
            <p class="mb-0">Latest Blogs</p>
        </div>
        <h2>Every Day, Read Our News & Blogs.</h2>
        <p class="style2">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit
            officia consequat
            duis enim velit mollit. Exercitation veniam.</p>
    </div>
    <div class="blog__wrapper">
        <SwiperSlide  :dataList="posts" :breakpoints="breakpoints" :loop="loop" :autoplay="autoplay" :speed="speed">
            <template #content="{ item }">
                <div class="blog__item">
                    <div class="blog__item-inner">
                        <div class="blog__thumb">
                            <img :src="item.thumbnail" alt="blog Images">
                        </div>
                        <div class="blog__content">
                            <div class="blog__content-top">
                                <span class="blog__meta-tag">{{ item.category }}</span>
                            </div>
                            <h6> <nuxt-link to="/blog-details">{{ item.title }}</nuxt-link> </h6>

                            <div class="blog__content-bottom blog__content-bottom--border">
                                <a href="#"><span><i class="fa-solid fa-calendar-days"></i></span>
                                    {{ item.date }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </SwiperSlide>
        <div class="text-center">
            <nuxt-link to="/blogs" class="trk-btn  trk-btn--secondary3 mt-5"> View All Blog
                <span><i class="fa-solid fa-arrow-right"></i></span> </nuxt-link>
        </div>

    </div>
</template>

<script>
import SwiperSlide from "@/components/base/slots/SwiperSlide.vue";
export default {
    props: {
        posts: {
            type: Array,
            default: () => [],
        },
    },
    components: { SwiperSlide },
    data() {
        return {
            spaceBetween: 24,
            grabCursor: true,
            loop: true,
            breakpoints: {
                576: {
                    slidesPerView: 1,
                },
                768: {
                    slidesPerView: 2,
                },
                992: {
                    slidesPerView: 3,
                    spaceBetween: 15,
                },
                1200: {
                    slidesPerView: 4,
                    spaceBetween: 15,
                },
                1400: {
                    slidesPerView: 5,
                    spaceBetween: 25,
                }
            },
            autoplay: {
                delay: 1,
                disableOnInteraction: true,
            },
            speed: 3000,
        }
    },
}
</script>